MVC5 Classic
wijeventscalendar Step 2 of 3: Initializing and customizing the Widget

In the previous step, you added the markup for the events calendar placeholder. Now you can add the jQuery script to initialize the widget. Then add some options to customize the events calendar.

  1. After the closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijeventscalendar widget:
    <scripttype="text/javascript">
            $(document).ready(function () {
                $("#eventscalendar").wijevcal();
            });
           </script>
    
  2. Customize the wijeventscalendar by setting options to determine the time intervals that will appear. The options you will be setting are describe in the following table:
    Option Value Description
    timeInterval 60 This option specifies the time interval for the Day view, in minutes.
    timeIntervalHeight 25 This option specifies the Day view time interval row height, in pixels.
    timeRulerInterval 120 This option specifies the time ruler interval for the Day view, in minutes.

    Add these options to the script, which should now look like the following:

    <scripttype="text/javascript">

            $(document).ready(function () {

                $("#eventscalendar").wijevcal({

                timeInterval: 60,

                timeIntervalHeight: 25,

                timeRulerInterval: 120

                });

            });

     </script>

    The following image shows the differences between the time interval options.

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback